<script setup lang="ts">
import {ref, watch} from "vue";
import {message} from "ant-design-vue";
import {localRegister} from "@/api/user/user";
import {ECode} from "@/util/commonUtil";

const props = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  webConfig: {
    type: Object,
    required: true
  }
});
const showRegister = ref<boolean>(props.show)
// 是否开放注册
const isRegister = ref<boolean>(props.webConfig.spreadLoginType == '1')

const registerForm = ref<any>({
  userName: '',
  nickName: '',
  password: '',
  password2: '',
  email: ''
})

const emit = defineEmits(['registerCallback']);

function goBack() {
  showRegister.value = false
  emit('registerCallback', true)
}

watch(() => props.show, () => {
  showRegister.value = props.show
})
watch(() => props.webConfig, () => {
  isRegister.value = props.webConfig.spreadLoginType == '1'
})

function register() {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  if (registerForm.value.userName.length < 5 || registerForm.value.userName.length > 20) {
    message.warning('用户名长度范围为5-20!')
    return
  }
  if (!emailRegex.test(registerForm.value.email)) {
    message.warning('请输入正确的邮箱地址!')
    return
  }
  if (registerForm.value.nickName.length < 2 || registerForm.value.nickName.length > 8) {
    message.warning('昵称长度范围为2-8!')
    return
  }
  if (registerForm.value.password.length < 5 || registerForm.value.password.length > 20) {
    message.warning('密码长度范围为5-20!')
    return
  }
  let passWord = registerForm.value.password
  let passWord2 = registerForm.value.password2
  if (passWord !== passWord2) {
    message.warning('两次密码不一致')
    return
  }
  let params: any = {}
  params.userName = registerForm.value.userName
  params.passWord = registerForm.value.password
  params.email = registerForm.value.email
  params.nickName = registerForm.value.nickName
  localRegister(params).then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      message.success(response.data)
      emit('registerCallback', true)
    }
  })
}
</script>

<template>
  <div class="registerBox" v-if="showRegister">
    <a-modal v-model:open="showRegister" :closable="false" :footer="null" centered>
      <template #title>
        <div class="registerTitle">
          <span class="w-full text-2xl flex justify-center items-center">
            <span class="text-rose-400">{{ webConfig.title }}</span>
            <span>社区注册</span>
          </span>
        </div>
      </template>
      <!--邮箱注册-->
      <div class="registerMain lg:w-[24rem] m-auto">
        <a-form :model="registerForm" autocomplete="off">
          <!-- 账号 -->
          <a-form-item name="userName"
                       :rules="[{ required: true, message: '请输入用户名!' }]">
            <div class="flex-column mb-2">
              <label class="font-semibold">账号</label>
            </div>
            <div class="inputForm flex items-center pl-2.5 rounded-[10px] h-[50px]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 32 32" height="20">
                <g data-name="Layer 3" id="Layer_3">
                  <path
                      d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path>
                </g>
              </svg>
              <input placeholder="请输入注册账号" class="input ml-2.5 w-full h-full rounded-[10px]" type="text"
                     v-model="registerForm.userName"
                     :disabled="!isRegister">
            </div>
          </a-form-item>
          <!--邮箱-->
          <a-form-item name="email"
                       :rules="[{ required: true, message: '请输入邮箱!' }]">
            <div class="flex-column mb-2">
              <label class="font-semibold">注册邮箱</label>
            </div>
            <div class="inputForm flex items-center pl-2.5 rounded-[10px] h-[50px]">
              <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="#141B34"
                      d="M7 8.5L9.94202 10.2394C11.6572 11.2535 12.3428 11.2535 14.058 10.2394L17 8.5"></path>
                <path stroke-linejoin="round" stroke-width="1.5" stroke="#141B34"
                      d="M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z"></path>
              </svg>
              <input placeholder="请输入注册邮箱" class="input ml-2.5 w-full h-full rounded-[10px]" type="text"
                     v-model="registerForm.email"
                     :disabled="!isRegister">
            </div>
          </a-form-item>
          <!-- 昵称 -->
          <a-form-item name="nickName"
                       :rules="[{ required: true, message: '请输入昵称!' }]">
            <div class="flex-column mb-2">
              <label class="font-semibold">昵称</label>
            </div>
            <div class="inputForm flex items-center pl-2.5 rounded-[10px] h-[50px]">
              <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
              >
                <circle cx="12" cy="12" r="10"></circle>
                <circle cx="12" cy="12" r="4"></circle>
                <line x1="21.17" x2="12" y1="8" y2="8"></line>
                <line x1="3.95" x2="8.54" y1="6.06" y2="14"></line>
                <line x1="10.88" x2="15.46" y1="21.94" y2="14"></line>
              </svg>
              <input placeholder="请输入昵称" class="input ml-2.5 w-full h-full rounded-[10px]" type="text"
                     v-model="registerForm.nickName"
                     :disabled="!isRegister">
            </div>
          </a-form-item>
          <!-- 密码 -->
          <a-form-item name="password"
                       :rules="[{ required: true, message: '请输入密码!' }]">
            <div class="flex-column mb-2">
              <label class="font-semibold">密码</label>
            </div>
            <div class="inputForm flex items-center pl-2.5 rounded-[10px] h-[50px]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-64 0 512 512" height="20">
                <path
                    d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path>
                <path
                    d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path>
              </svg>
              <input placeholder="请输入密码" class="input ml-2.5 w-full h-full rounded-[10px]" type="password"
                     v-model="registerForm.password"
                     :disabled="!isRegister">
            </div>
          </a-form-item>
          <!-- 重复密码 -->
          <a-form-item name="password2"
                       :rules="[{ required: true, message: '请输入重复密码!' }]">
            <div class="flex-column mb-2">
              <label class="font-semibold">重复密码</label>
            </div>
            <div class="inputForm flex items-center pl-2.5 rounded-[10px] h-[50px]">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-64 0 512 512" height="20">
                <path
                    d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path>
                <path
                    d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path>
              </svg>
              <input placeholder="请输入重复密码" class="input ml-2.5 w-full h-full rounded-[10px]" type="password"
                     v-model="registerForm.password2"
                     :disabled="!isRegister">
            </div>
          </a-form-item>
          <!-- 注册 -->
          <a-form-item class="flex justify-center">
            <a-button type="primary" html-type="submit" :disabled="!isRegister"
                      class="text-[15px] font-medium rounded-[10px] h-[40px] cursor-pointer"
                      style="border: none"
                      @click="register">
              立即注册
            </a-button>
            <a-button
                style="background: #e5e5e5;border: none"
                class="text-[15px] font-medium rounded-[10px] h-[40px] cursor-pointer ml-4"
                @click="goBack">
              返回登录
            </a-button>
          </a-form-item>
          <!-- 返回登录 -->
          <a-form-item class="flex justify-center mb-0">
            <span class="text-amber-500 mr-1">Tips:</span>
            <span class="text-gray-400">注册后，需要到邮箱进行邮件认证~</span>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<style scoped lang="less">
::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.flex-column > label {
  color: #151717;
}

.inputForm {
  border: 1.5px solid #ecedec;
  transition: 0.2s ease-in-out;
}

.inputForm:focus-within {
  border: 1.5px solid #2d79f3;
}
</style>
